<template>
<section>
        <el-form :inline="true" :model="filters">
            <el-form-item label="部门">
                <el-input v-model="filters.name" placeholder="部门"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="filters.state" clearable  placeholder="请选择状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadDepartments">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </el-form-item>
        </el-form>


    <!--添加和修改弹出框
    :model="addForm"双向绑定的公共前缀
    -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible"   width="30%" >
        <el-form  :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
            <el-form-item label="部门" prop="name">
                <el-input v-model="addForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="编号" prop="sn">
                <el-input v-model="addForm.sn" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="addForm.state">
                    <el-radio class="radio" :label="1">启用</el-radio>
                    <el-radio class="radio" :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="addForm.deptId" clearable placeholder="请选择">
                    <el-option
                            v-for="item in depts"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门经理">
                <el-select v-model="addForm.managerId" clearable placeholder="请选择">
                    <el-option
                            v-for="item in managers"
                            :label="item.username"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-input v-model="addForm.id" type="hidden"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addbutton">确 定</el-button>
      </span>
    </el-dialog>
   <!-- </el-col>
    <!--@selection-change选中复选框触发此函数
    v-loading="listLoading"显示加载框
    data="" 准备的数据列表
    -->
    <el-table :data="departements" v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <!--显示复选框-->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="部门" >
        </el-table-column>
        <el-table-column prop="sn" label="编号" >
        </el-table-column>
        <el-table-column prop="parent.name" label="上级部门" >
        </el-table-column>
        <el-table-column prop="manager.username" label="部门经理" >
        </el-table-column>
        <el-table-column prop="state" label="状态" :formatter="formatState" >
        </el-table-column>
        <el-table-column label="操作" width="150">
            <template scope="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <!--工具条-->
    <el-col :span="24" class="toolbar">
        <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
        </el-pagination>
    </el-col>

</section>
</template>

<script>
    export default {
        data(){
            return{
                //修改和添加
                addForm:{
                    name:'',
                    sn:'',
                    state:'',
                    id:'',
                    deptId:'',
                    managerId:''
                },
                //弹出框标题
                dialogTitle:'',
                //弹出框状态
                dialogVisible:false,
                filters:{
                    name:"",
                    state:""
                },
                //部门列表数据
                departements: [],
                //是否显示加载框
                listLoading: false,

                //当前页条数
                currentPage:1,
                //每页条数
                pageSize:10,
                //总条数
                total:0,
                //选中复选框对应的地址
                sels:[],
                //部门列表
                depts:[],
                //部门经理
                managers:[],
                //验证
                addFormRules: {
                    name: [
                        {required: true, message: '部门必填！!', trigger: 'blur'}
                    ],
                    sn: [
                        {required: true, message: '编号必填！!', trigger: 'blur'}
                    ]
                }

            }
        },
        methods:{
            //选中复选框触发此函数，vals：选中的值（行）
            selsChange(vals){
              // console.debug(vals)
                this.sels=vals;
            },
            //格式化指定列的值  row:当前行对应的值   column:列属性的介绍
            formatState(row,colum){
                return row.state? "启用":"禁用";
            },
            //批量删除
            batchRemove(){
                this.$confirm('确认删除该记录吗?', '提示',{
                    type: 'warning'
                }).then(()=>{
                    this.$http.patch("/department/batchRemove",this.sels).then((res=>{
                        /*console.debug(res)*/
                        let {success,msg}=res.data
                        if (success){
                            this.loadDepartments();
                        }else {
                            this.$message.error(msg)
                        }

                    }))
                })


            },
            //页码发生改变的时候触发此函数     @param  val:页码
            handleCurrentChange(val){
                //重新设置当前页
                this.currentPage=val;
                //刷新页面
                this.loadDepartments();
            },

            //添加和修改注册事件,提交按钮
            addbutton(){
                if(this.addForm.deptId){
                    //给addForm动态添加属性
                    this.addForm.parent={"id":this.addForm.deptId}
                }
                if (this.addForm.managerId){
                    //给addForm动态添加属性
                    this.addForm.manager={"id":this.addForm.managerId}
                }
                //必须验证通过之后，才执行if语句中的内容
                this.$refs.addForm.validate((valid)=>{
                    console.debug(valid)
                    if(valid){
                        this.$http.put("/department",this.addForm).then((res=>{
                            let {success,msg}=res.data
                            if(success){
                                //刷新列表
                                this.loadDepartments();
                                //加载部门列表数据
                                this.loadAllDepartments();
                                //加载部门经理列表数据
                                this.loadAllEmployees();
                                //关闭弹出框
                                this.dialogVisible=false
                            }else {
                                this.$message.error(msg)
                            }
                        }))
                    }
                })
            },
            //新增注册事件
            handleAdd(){
                this.dialogTitle='新增人员'
               if(this.$refs["addForm"]){
                    //重置
                   this.$refs["addForm"].resetFields()//this.$refs.addForm.resetFields()
               }
               //清空
                for(var k in this.addForm){
                    this.addForm[k]="";
                }
                //默认状态
                this.addForm.state=1
                //弹出框状态
                this.dialogVisible=true
            },
            //修改注册事件
            handleEdit(index,row){
                //console.debug(row)
                this.dialogTitle='修改信息'
                //回显数据
                  for(var k in this.addForm){
                        this.addForm[k]=row[k];
                   }
                   //回显部门数据
                if (row.manager){
                    this.addForm.managerId=row.manager.id;
                }
                //回显经理数据
                if(row.parent){
                    this.addForm.deptId=row.parent.id;
                }
                //弹出框状态
                this.dialogVisible=true
            },
            //删除注册事件
            handleDel(index,row){
                this.$confirm('您确认离我而去吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("http://localhost/department/"+row.id).then((res => {
                        //console.debug(res)
                        let {success, msg} = res.data;
                        if(success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadDepartments();
                        }else{
                            this.$message.error(msg);
                        }
                    }));
                }).catch(() => {
                });
            },
            //加载部门列表数据
            loadDepartments(){
                //显示加载狂
                this.listLoading=true;
                //准备分页数据
                let param={"currentPage":this.currentPage,"pageSize":this.pageSize,"name":this.filters.name,
                "state":this.filters.state}
                /*    ,"name":this.filters.name*/
                this.$http.patch("http://localhost/department",param).then((res=>{
                   //console.debug(param)
                    let {result,total}=res.data
                    this.departements=result
                    this.total=total
                    this.listLoading=false

                }))
            },

            //加载所有部门列表数据
            loadAllDepartments(){
                this.$http.patch("/department/loadAll").then((res=>{

                    this.depts=res.data;
                }))
            },
            //加载所有的员工列表
            loadAllEmployees(){
                this.$http.patch("/employee/loadAll").then((res=>{
                    console.debug(res)
                    this.managers=res.data;
                }))
            }
        },
        mounted(){
            //加载部门列表数据(分页)
            this.loadDepartments();
            //加载部门列表数据
            this.loadAllDepartments();
            //加载部门经理列表数据
            this.loadAllEmployees();
        }
    };

</script>
